<template lang="html">
	<div id="mainbox">
		<MainHeader class="MainHeader"></MainHeader>
		<MainSection class="MainSection">
			<transition name="fade">
	        	<router-view class="seccon"></router-view>
	      	</transition>
		</MainSection>
		<MainFoot class="MainFoot"></MainFoot>
	</div>
</template>

<script>
	import MainHeader from "./mainzj/header.vue"
	import MainSection from "./mainzj/section.vue"
	import MainFoot from "./mainzj/footer.vue"
	export default {
		components:{
		    MainHeader,
		    MainSection,
		    MainFoot
		}
	}
</script>

<style lang="css">
	body{
		width:100%;
		height: 100%;

	}
	#mainbox{
		width:100%;
		height:100%;
		text-align: center;
		font-size: 60px;
		color:#fff;
		line-height: 80px;
		display: flex;
		flex-direction:column;
	}
	.MainHeader{
		width:100%;
		height:80px;
		font-size: 30px;
	}
	.MainSection{
		width:100%;
		flex: 1;
		font-size: 30px;
		overflow: hidden;
	}
	.MainFoot{
		width:100%;
		height:80px;
		font-size: 30px;
		
	}
</style>